<template>
  <div
    :id="id"
    ref="chart"
    :class="className"
    :style="{height:height,width:width}"
  />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default {
  name: 'LineSmooth',
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    sourceData: {
      type: [Object, Array],
      default: null
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    options() {
      var _rawData = this.sourceData
      return {
        dataset: [
          {
            id: 'dataset_raw',
            source: _rawData
          },
          {
            id: 'dataset_since_1950_of_germany',
            fromDatasetId: 'dataset_raw',
            transform: {
              type: 'filter',
              config: {
                and: [
                  // { dimension: 'Year', gte: 1950 },
                  { dimension: 'Country', value: 'Germany' }
                ]
              }
            }
          },
          {
            id: 'dataset_since_1950_of_france',
            fromDatasetId: 'dataset_raw',
            transform: {
              type: 'filter',
              config: {
                and: [
                  // { dimension: 'Year', gte: 1950 },
                  { dimension: 'Country', value: 'France' }
                ]
              }
            }
          }
        ],
        // title: {
        //   text: 'Income of Germany and France since 1950'
        // },
        padding: 100,
        grid: {
          x: 50,
          x2: 0
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle'
        },
        yAxis: {
          // name: 'Income'
        },
        // legend: {
        //   data: ['Income', 'Population']
        // },
        series: [
          {
            type: 'line',
            datasetId: 'dataset_since_1950_of_germany',
            showSymbol: false,
            encode: {
              x: 'Year',
              y: 'Income',
              itemName: 'Year',
              tooltip: ['Income']
            }
          },
          {
            type: 'line',
            datasetId: 'dataset_since_1950_of_france',
            showSymbol: false,
            encode: {
              x: 'Year',
              y: 'Income',
              itemName: 'Year',
              tooltip: ['Income']
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
    this.options && this.chart.setOption(this.options)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$refs.chart)
      this.chart = echarts.init(document.getElementById(this.id))
    }
  }
}
</script>
